<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: #f00;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }
    </style>

</head>

<body>
    <div id="app">

        <button v-on:click="add">btn({{count}})</button>
        <button v-on:click="add(3,$event)">+3btn({{count}})</button>
        <!-- 事件修饰符 -->
        <a href="https://www.baidu.com" @click.prevent="myAlert($event)">百度</a>
        <a href="https://www.baidu.com" @click.once="myAlert($event)">百度2</a>
        <button v-on:click.once="add(5,$event)">+3btn({{count}})</button>


        <div class="outer" @click.capture="outer">
            <div class="inner" @click="inner">
                <div>
                    <button @click.self="count++">{{count}}</button>
                </div>
            </div>
        </div>


        <input type="text" @keyup.down="handleKeydown">
        <button @click.ctrl="count++">{{count}}</button>


    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { ref, reactive, watch, createApp, toRefs } = Vue;
        createApp({
            setup() {
                const count = ref(0)
                const add = (n, event) => {
                    count.value += n
                    console.log("event=>", event.target.innerText);
                }
                const myAlert = (e) => {
                    alert("hello")
                    // 阻止默认事件
                    e.preventDefault();
                }

                const outer = () => {
                    console.log("outer");

                }
                const inner = (e) => {
                    console.log("inner");
                    // 阻止事件冒泡
                    // e.stopPropagation();

                }
                const handleKeydown = () => {
                    console.log("keydown");

                }
                return {
                    add,
                    count,
                    myAlert,
                    outer,
                    inner,
                    handleKeydown
                }
            }


        }).mount('#app')
    </script>
</body>

</html>